<template>
  <absolute-container class="p-[20px]">
    <page-main
      class="flex h-full flex-col rounded-[4px] bg-[#fff] p-[16px]"
      style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)"
    >
      <t-button
        type="text"
        class="common-sel-btn absolute right-0 top-0 z-[999] w-[100px]"
        style="height: 32px; line-height: 32px"
        @click="$router.push('/system/dict-mgmt/dict-type-mgmt')"
        ><svg-icon name="ic-back" class="mr-[6px] inline" />返回</t-button
      >
      <QueryForm
        ref="refQueryForm"
        :getDataList="getDataList"
        @create-item="onCreateItem"
        @batch-delete="onBatchDelete"
      ></QueryForm>
      <div class="el-form-item">
        <t-button svgIcon="ic-btn-add" @click="onCreateItem">新增</t-button>
        <t-button svgIcon="ic-btn-delete-red" class="bg-danger" @click="onBatchDelete">批量删除</t-button>
      </div>

      <el-table height="100%" :data="dataList" row-key="id" @selection-change="handleSelectionChange">
        <el-table-column reserve-selection type="selection" width="40" center></el-table-column>
        <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
        <el-table-column :prop="PROPS.dictionaryItem" :label="LABELS.dictionaryItem" />
        <el-table-column :prop="PROPS.key" :label="LABELS.key" />
        <el-table-column :prop="PROPS.sort" :label="LABELS.sort" />
        <el-table-column :prop="PROPS.parent" :label="LABELS.parent" />
        <el-table-column :label="LABELS.status">
          <template #default="{ row }">
            <div class="flex items-center">
              <div
                class="mr-[8px] h-[6px] w-[6px] flex-shrink-0"
                style="border-radius: 50%"
                :class="row.enabled ? 'bg-[#1D7FF2]' : 'bg-[#ed7b2f]'"
              ></div>
              {{ row.enabled ? "启用" : "禁用" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="PROPS.createdBy" :label="LABELS.createdBy" />
        <el-table-column :prop="PROPS.createdAt" :label="LABELS.createdAt" />
        <el-table-column class-name="!px-[0px]" label="操作" align="left" fixed="right" width="100">
          <template #default="{ row }">
            <div class="space-x-[12px]">
              <span class="cursor-pointer text-[#1D7FF2]" @click="onEdit(row)">编辑</span>
              <span class="color-danger cursor-pointer" @click="onDel(row)">删除</span>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
      <div class="relative -left-[16px] -top-[1px] z-50 h-[1px] w-[calc(100%+32px)] bg-[#e5e7eb]"></div>
      <el-pagination
        :current-page="pagination.page"
        :total="pagination.total"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        :layout="pagination.layout"
        :hide-on-single-page="false"
        class="pt-[20px]"
        background
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </page-main>

    <DetailDrawer :id="id" v-model="drawerVisible" @on-submit-success="getDataList" />
  </absolute-container>
</template>

<script>
import config from "./config";
import QueryForm from "./components/QueryForm.vue";
import DetailDrawer from "./components/DetailDrawer.vue";
import paginationMixin from "@/mixin/pagination";
import tableMixin from "@/mixin/table";
import { systemDictDelete, systemDictList } from "@/api/dictionary";

export default {
  name: "DictItemMgmt",
  components: { DetailDrawer, QueryForm },
  mixins: [paginationMixin, tableMixin],
  data() {
    return {
      ...config,
      dictTypeId: this.$route.params.id,
      id: "",
      dataList: [],
      drawerVisible: false,
      multipleSelection: [],
    };
  },
  computed: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList(param) {
      const params = this.getParams(param);
      params.dictTypeId = this.dictTypeId;
      systemDictList(params).then((res) => {
        this.dataList = res.content;
        this.pagination.total = res.totalElements;
      });
    },
    onCreateItem() {
      this.id = "";
      this.drawerVisible = true;
    },
    onEdit(row) {
      this.id = row.id;
      this.drawerVisible = true;
    },
    async onDel(row) {
      try {
        await this.$confirm(`确定删除「${row[this.PROPS.dictionaryItem]}」吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        try {
          await systemDictDelete([row.id]);
          this.$message.success("删除成功!");
          this.getDataList();
        } catch (e) {
          //no-op
        }
      } catch {
        this.$message.warning("已取消删除");
      }
    },
    async onBatchDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请先选择要删除的数据");
      } else {
        try {
          await systemDictDelete(this.multipleSelection.map((item) => item.id));
          this.$message.success("删除成功!");
          this.getDataList();
        } catch {
          this.$message.warning("已取消删除");
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped></style>
